<%--
  Created by IntelliJ IDEA.
  User: 86159
  Date: 2023/4/18
  Time: 8:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <jsp:include page="/WEB-INF/include/bootstrapHeader.jsp"/>
    <link rel="stylesheet" href="<c:url value="/css/main.css"/>"/>
</head>

<body class="d-flex flex-column h-100">
<jsp:include page="/WEB-INF/include/pageHeader.jsp"/>

<main class="flex-shrink-0">
    <div class="container">
        <h3 class="mt-5">记录你每一天的支出情况</h3>
        <form class="row g-3 needs-validation" novalidate>
            <div class="col-md-6">
                <label for="paidType" class="form-label">支出类型</label>
                <select class="form-control" id="paidType" name="paidType" required>
                    <option disabled selected>请选择...</option>
                </select>
                <div class="valid-feedback">
                    验证通过
                </div>
                <div class="invalid-feedback">
                    验证不通过
                </div>
            </div>
            <div class="col-md-6">
                <label for="paidName" class="form-label">支出商品名称</label>
                <input type="text" class="form-control" id="paidName" name="paidName" pattern="[\u4e00-\u9fa5]{2,10}" required>
                <div class="valid-feedback">
                    商品名称正确
                </div>
                <div class="invalid-feedback">
                    验证不通过, 商品名称为2 - 10个汉字
                </div>
            </div>
            <div class="col-md-6">
                <label for="paidName" class="form-label">支出时间</label>
                <input type="date" class="form-control" id="paidDate" name="paidDate" required>
                <div class="valid-feedback">
                    支出时间正确
                </div>
                <div class="invalid-feedback">
                    验证不通过
                </div>
            </div>
            <div class="col-md-6">
                <label for="amountPaid" class="form-label">支出金额(元)</label>
                <input type="number" class="form-control" id="amountPaid" name="amountPaid" step="0.01" min="0.10" required>
                <div class="valid-feedback">
                    支出金额正确
                </div>
                <div class="invalid-feedback">
                    验证不通过, 最小为0.10元
                </div>
            </div>
            <div class="col-md-6">
                <label for="remark" class="form-label">备注</label>
                <input type="text" class="form-control" id="remark" name="remark">
            </div>
            <div class="col-12">
                <button class="btn btn-primary" type="submit">保存</button>
            </div>
            <script>
                // Example starter JavaScript for disabling form submissions if there are invalid fields
                (() => {
                    'use strict'

                    // Fetch all the forms we want to apply custom Bootstrap validation styles to
                    const forms = document.querySelectorAll('.needs-validation')

                    // Loop over them and prevent submission
                    Array.from(forms).forEach(form => {
                        form.addEventListener('submit', event => {
                            if (!form.checkValidity()) {
                                event.preventDefault()
                                event.stopPropagation()
                            }

                            form.classList.add('was-validated')
                        }, false)
                    })
                })()
            </script>
        </form>
    </div>
</main>

<jsp:include page="/WEB-INF/include/pageFooter.jsp"/>
</body>
</html>

